<template>
	<view class="treeMeun">
		<uni-collapse v-for="(collapseItem, collapseIndex) in collapseItems" :key="collapseIndex"
			@change="handleCollapseChange(collapseItem,collapseIndex)">
			<uni-collapse-item title-border="show" :border="false" :open="true" :title="collapseItem.title"
				v-show="collapseItem.is_show && collapseItem.goods_number>0" :name="collapseItem._id"
				:class="currentActive._id === collapseItem._id ? 'active-title' : ''">

				<uni-list :border="false" class="indent-level">
					<uni-list-item showArrow thumb="/static/product-center/zhiyin.png" thumb-size="sm" :border="false"
						:showBadge="true" :badgeText="listItem.goods_number"
						v-show="listItem.is_show && listItem.goods_number>0"
						v-for="(listItem, listIndex) in collapseItem.children" :key="listIndex" :title="listItem.title"
						:class="[
							{'active':(collapseItemIndex===collapseIndex&&listLiIndex===listIndex)},
							currentActive._id === listItem._id ? 'active-title1' : '']"
						@click="handleClick(listItem,collapseIndex, listIndex, $event,collapseItem)" link />
				</uni-list>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collapseItemIndex: -1,
				listLiIndex: -1,
				listLiItem: '',
				extraIcon: {
					color: '#d9001b',
					size: '14',
					type: 'right'
					// type: 'iconfont icon-yousanjiao'
				},
			}
		},
		props: {
			collapseItems: {
				type: Array, // 数字类型
			},
			currentActive: {
				type: Object, // 存储当前选中项的索引
			},
		},
		mounted() {
			console.log('传递过来的：', this.currentActive._id)
		},

		methods: {
			//处理伸缩菜单展开/收起事件
			handleCollapseChange(itex, collapseIndex) {
			},
			// 处理列表项点击事件
			handleClick(emit, collapseIndex, listIndex, event,collapseItem) {
				this.currentActive._id = -1;
				this.listLiItem = emit;
				this.collapseItemIndex = collapseIndex;
				this.listLiIndex = listIndex;
				emit.levelTitle = collapseItem.title
				// 当前点击的列表项信息
				this.$emit('clickEmit', emit)
			},
			search(val){
				this.currentActive._id = -1;
			},
		},
	}
</script>
<style scoped>
	.active /deep/ .uni-list-item__content-title {
		/* background-color: #e6f7ff; */
		/* 高亮背景色 */
		color: #d9001b;
		/* 高亮文字色 */
	}

	.active-title /deep/ .uni-collapse-item__title-box {
		color: #d9001b;
	}
	.active-title1 /deep/ .uni-list-item__content-title {
		color: #d9001b;
	}

	.treeMeun /deep/ .uni-collapse-item__title-text {
		font-size: 14px !important;
		font-weight: 500;
	}

	.treeMeun /deep/ .uni-list-item__icon {
		margin-right: 0;
	}

	.treeMeun /deep/ .uni-list-item__content-title {
		line-height: 18px;
	}

	.treeMeun /deep/ .uni-list-item__icon-img {
		margin-right: 0;
	}

	.treeMeun /deep/ .uni-list-item__container {
		padding: 7px 15px;
	}

	.treeMeun /deep/ .uni-collapse-item--animation {
		cursor: pointer;
	}

	.indent-level {
		padding: 10px 0 10px 0;
	}

	.indent-level /deep/ .uni-icon-wrapper {
		display: none;
	}

	.indent-level /deep/ .uni-badge--success {
		background-color: #c3c3c3;
	}
</style>